<template>
    <div>
        <!--   新增或保存商品弹出层     -->
        <el-dialog
                :title="title"
                :visible.sync="visible"
                width="30%"
        >
            <el-form :model="form"  ref="form" label-width="100px" class="demo-ruleForm">
                <el-form-item label="商品名" prop="pname">
                    <el-input v-model="form.pname"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" prop="price">
                    <el-input v-model="form.price" ></el-input>
                </el-form-item>
                <el-form-item label="计量单位" prop="uom">
                    <el-input v-model="form.uom" ></el-input>
                </el-form-item>
                <el-form-item label="商品库存" prop="sku" v-if="Upsku">
                    <el-input v-model="form.sku"></el-input>
                </el-form-item>
                <el-form-item label="商品类别" >
                    <el-select v-model="form.type" placeholder="请选择商品类别" :disabled="Uptype">
                        <el-option v-for="item in this.type" :key="item.id" :value="item.id" :label="item.typename"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品图片">
                    <el-upload
                            class="avatar-uploader el-upload1"
                            action="http://localhost:8080/products/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload"
                            with-credentials>
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="yes()">确 定</el-button>
  </span>

        </el-dialog>
        <!--   商品表     -->
        <el-row>
            <el-col :span="6"><el-button type="success" class="addOne" @click="showWin()">新增</el-button></el-col>
            <el-col :span="12"><el-input v-model="Pname" placeholder="搜索用户"></el-input></el-col>
            <el-col :span="6"><el-button icon="el-icon-search" @click="load" circle></el-button></el-col>
        </el-row>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="pid"
                    label="商品编号"
            >

            </el-table-column>
            <el-table-column
                    prop="mainimage"
                    label="商品图片"
            >
                <template slot-scope="scope">
                    <el-image
                            style="width: 100px; height: 100px"
                            :src="'http://localhost:9999/img/head/'+scope.row.mainimage"
                            fit="fill"></el-image>
                </template>
            </el-table-column>
            <el-table-column
                    prop="pname"
                    label="商品名"
            >

            </el-table-column>
            <el-table-column
                    prop="price"
                    label="商品单价"
            >
            </el-table-column>
            <el-table-column
                    prop="uom"
                    label="计量单位"
            >
            </el-table-column>

            <el-table-column
                    prop="productstype.typename"
                    label="商品类别"
            >
            </el-table-column>
            <el-table-column
                    prop="sku"
                    label="商品库存"
            >
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
            >
                <template slot-scope="scope">
                    <el-button  type="primary" plain @click="sj(scope.row)" size="small" v-if="scope.row.status==0">上架</el-button>
                    <el-button  type="primary"  size="small" @click="xj(scope.row)" v-else-if="scope.row.status==1">下架</el-button>
                    <el-button @click="showWin(scope.row)" type="text" size="small">编辑</el-button>
                    <el-button type="danger" @click="del(scope.row)" icon="el-icon-delete" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                @current-change="currentChange"
                layout="prev, pager, next"
                :page-size="pageSize"
                :current-page="currentPage"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    export default {
        name: "products",
        data(){
            return{
                aaa:false,
                visible:false,
                Uptype:false,
                pageSize:5,
                currentPage:1,
                total:1,
                Pname:"",
                type:[],
                tableData:[],
                title:"",
                imageUrl:"",
                form:[

                ],
                Upsku:false
            }
        },
        created() {
            this.loadData();
            this.$http.post("products/selectProductsType").then(res=>{
                // console.info("aaaa",res.data);
                this.type=res.data;
                // console.info(this.type)
            })
        },
        methods:{
            loadData(){
                this.$http.post("products/selectAll",{pname:this.Pname,currentPage:this.currentPage,pageSize:this.pageSize}).then(res=>{
                    this.tableData=res.data.list;
                    this.total=res.data.total;
                    // console.info("hhh",this.tableData)
                })
            },
            showWin(row){
                this.visible=true;
                if (row){
                    this.form=Object.assign({},row);
                    this.Uptype=true
                    this.form.type=row.productstype.id;
                    this.title="修改商品"
                    this.Upsku=true
                }else {
                    this.form={}
                    this.Uptype=false
                    this.Upsku=false
                    this.title="新增商品"
                }
            },
            load(){
                this.loadData()
            },
            yes(){
                delete this.form.productstype;
              console.info(this.form);
              this.$http.post("products/saveOrUpdate",this.form).then(res=>{
                  if (res.data.success){
                      this.visible=false;
                      this.loadData();
                  }
              })
            },
            del(row){
                this.$http.post("products/delete",{pid:row.pid}).then(res=>{
                    if (res.data.success){
                        this.loadData()
                    }
                })
            },
            sj(row){
                if (row.sku<1){
                    this.$message({
                        message: '商品暂无库存，请补货后再上架',
                        type: 'warning'
                    });
                }else {
                    this.$http.post("products/updateStatus1",{pid:row.pid}).then(res=>{
                        if (res.data.success){
                            this.loadData()
                        }
                    })
                }
            },
            xj(row){
                this.$http.post("products/updateStatus2",{pid:row.pid}).then(res=>{
                    if (res.data.success){
                        this.loadData()
                    }
                })
            },
            handleAvatarSuccess(res) {
                console.info("aaa",res)
                this.imageUrl = "http://localhost:9999/img/head/"+res.target;
                this.form.mainimage=res.target;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            currentChange(currentPage){
                this.currentPage=currentPage;
                this.loadData()
            }
        }
    }
</script>

<style scoped>
    .s1{
        margin-left: -67px;
    }
    .addOne{
        margin: 5px;
    }
    .el-upload1 {
        width: 178px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .el-upload1:hover {
        width: 178px;
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>